<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="用户名：">
                  <Input v-model.trim="conditions.username" clearable placeholder="用户名/真实姓名"></Input>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="addUser">添加用户</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <!-- <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>-->
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isFixed" title="修改个人信息">
      <Form ref="formItem" :model="formItem" :rules="ruleInline" inline>
        <FormItem prop="password">
          <Input type="password" v-model.trim="formItem.password" placeholder="Password">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="realname">
          <Input v-model.trim="formItem.realname" placeholder="请输入真实姓名">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem label="展会名称：" prop="miceId">
          <Select
            v-model="formItem.miceId"
            clearable
            @on-change="checkStatus($event, 'miceId','formItem')"
          >
            <Option v-for="item in mices" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="角色名称：" prop="group">
          <Select
            v-model="formItem.group"
            clearable
            @on-change="checkStatus($event, 'group','formItem')"
          >
            <Option v-for="item in grouplist" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <!-- <FormItem label="小程序app_user_id绑定：" prop="app_user_id">
          <Input v-model.trim="formItem.app_user_id" placeholder="请输入app_user_id"></Input>
        </FormItem>-->
        <FormItem label="小程序用户绑定：" prop="app_user_id">
          <Select
            v-model="formItem.app_user_id"
            clearable
            @on-change="checkStatus($event, 'app_user_id','formItem')"
          >
            <Option v-for="item in wxlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="Itemcancel">取消</Button>
        <Button type="primary" @click="submit('formItem')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isAdd" title="添加用户" @on-ok="ok('formInline')" @on-cancel="cancel">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="username">
          <Input
            type="text"
            v-model.trim="formInline.username"
            placeholder="Username"
            style="width：300px"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model.trim="formInline.password" placeholder="Password">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="realname">
          <Input v-model.trim="formInline.realname" placeholder="请输入真实姓名">
            <Icon type="ios-brush-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem label="展会名称：" prop="miceId">
          <Select
            v-model="formInline.miceId"
            clearable
            @on-change="checkStatus($event, 'miceId','formInline')"
          >
            <Option v-for="item in mices" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="角色名称：" prop="group">
          <Select
            v-model="formInline.group"
            clearable
            @on-change="checkStatus($event, 'group','formInline')"
          >
            <Option v-for="item in grouplist" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="小程序用户绑定：" prop="app_user_id">
          <Select
            v-model="formInline.app_user_id"
            clearable
            @on-change="checkStatus($event, 'app_user_id','formInline')"
          >
            <Option v-for="item in wxlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok('formInline')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  createUser,
  userList,
  modify,
  groupList,
  wxUserList
} from "../../api/account";
import { miceList } from "../../api/exhibitors";
export default {
  data() {
    return {
      list: [],
      mices: [],
      wxlist: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {
        is_use: "",
        role_id: "",
        username: "",
        supplier_id: ""
      },
      columns1: [
        {
          title: "id",
          key: "user_id",
          align: "center"
        },
        {
          title: "账户名",
          key: "username",
          align: "center"
        },
        {
          title: "真实姓名",
          key: "realname",
          align: "center"
        },
        {
          title: "绑定展会",
          key: "miceId",
          align: "center"
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      tableHeight: 100,
      isAdd: false,
      isFixed: false,
      username: "",
      formItem: {
        password: "",
        miceId: "",
        realname: "",
        group: "",
        app_user_id: ""
      },
      ruleInline: {
        password: [
          {
            required: true,
            message: "请输入账号密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码需超过6位数",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ]
      },
      miceId: "",
      formInline: {
        username: "",
        password: "",
        miceId: "",
        realname: "",
        group: "",
        app_user_id: ""
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入账号密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码需超过6位数",
            trigger: "blur"
          }
        ],
        realname: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ]
      },
      grouplist: []
    };
  },
  created() {
    this.getmiceList(0);
    this.getgroupList();
    this.getuserList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    checkStatus(e, name, pname) {
      this[pname][name] = e;
      if (name == "miceId") {
        this.miceId = e;
        this.getwxUserList();
      }
    },
    getgroupList() {
      groupList().then(res => {
        if (res.status) {
          this.grouplist = res.data.map(e => {
            return {
              label: e.name,
              value: e.id
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getwxUserList() {
      wxUserList({ all: true, class: 2, miceId: this.miceId }).then(res => {
        if (res.status) {
          this.wxlist = res.data.list.map(e => {
            return {
              value: e.id,
              label: e.nickname
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getmiceList(type) {
      const { page, pageSize } = this;
      miceList(
        Object.assign(this.conditions, { page: page - 1, pageSize, type })
      ).then(res => {
        if (res.status) {
          this.mices = res.data.list.map(e => {
            return {
              value: e.miceId,
              label: e.miceName
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getuserList() {
      this.loading = true;
      const { page, pageSize } = this;
      userList({ page: page - 1, pageSize }).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.loading = false;
          this.$Message.error(res.msg);
        }
      });
    },
    show(row) {
      this.formItem = {
        password: "",
        realname: row.realname,
        miceId: row.miceId,
        group: row.group,
        app_user_id: row.app_user_id
      };
      this.miceId = row.miceId;
      this.getwxUserList();
      this.isFixed = true;
      this.username = row.username;
    },
    handleReset(){
      this.conditions={
        is_use: "",
        role_id: "",
        username: "",
        supplier_id: ""
      }
       this.page = 1;
       this.getuserList();
    },
    changePage(e) {
      this.page = e;
      this.getuserList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getuserList();
    },
    addUser() {
      this.formInline = {
        username: "",
        password: "",
        miceId: "",
        realname: "",
        group: "",
        app_user_id: ""
      };
      this.isAdd = true;
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        const {
          username,
          password,
          miceId,
          realname,
          group,
          app_user_id
        } = this.formInline;
        if (valid) {
          createUser({
            username,
            password,
            miceId,
            realname,
            group,
            app_user_id
          }).then(res => {
            if (res.status) {
              this.isAdd = false;
              this.getuserList();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        } else {
        }
      });
    },
    submit(name) {
      this.$refs[name].validate(valid => {
        const { password, miceId, realname, group, app_user_id } = this.formItem;
        if (valid) {
          modify({
            username: this.username,
            password,
            miceId,
            realname,
            group,
            app_user_id
          }).then(res => {
            if (res.status) {
              this.isFixed = false;
              this.getuserList();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        } else {
        }
      });
    },
    Itemcancel() {
      this.isFixed = false;
    },
    cancel() {
      this.isAdd = false;
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
